$(function () {
    // console.log("ss")
    // 获取焦点出现更多信息
    $(".wrap>.top>.yk_header>.ipt>input").focus(function () {
        $(".wrap>.top>.search").show();
    });
    $(".wrap>.top>.search>.out>span").click(function () {
        $(".wrap>.top>.search").hide();
    });
    // 点击更多导航信息
    $(".shade>span").click(function () {
        console.log("下拉箭头");
        $(this).toggleClass("icon-xialajiantou").toggleClass("icon-ico_back");

        // ul添加  样式名    active
        $(".wrap>.top>.nav ul").toggleClass("active");
        $(".nav").toggleClass("active");
    });

    // 点击导航栏的分类，添加相应的样式
    $(".wrap>.top>.nav ul>li").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
    })



    //调取数据
    $.ajax({
        url: "data/index.json",
        dataType: "json",
        type: "get",
        success: function (e) {
            console.log(e);
            var lun = e.lun;
            var recommend = e.recommend;
            console.log(recommend);
            console.log(lun);
            $.each(lun, function (i, obj) {
                if (obj.style != "") {
                    if (obj.style == "全网首播") {
                        $(".swiper-wrapper").append(`
                        <div class="swiper-slide">
                            <img src="images/nav_image/${obj.imgUrl}" alt=">${obj.title}">
                            <span class="style">${ obj.style}</span>
                            <p>${obj.title}</p>
                        </div>
                    `);
                    } else {
                        $(".swiper-wrapper").append(`
                            <div class="swiper-slide">
                                <img src="images/nav_image/${obj.imgUrl}" alt=">${obj.title}">
                                <span>${ obj.style}</span>
                                <p>${obj.title}</p>
                            </div>
                        `);
                    };

                } else {
                    $(".swiper-wrapper").append(`
                        <div class="swiper-slide">
                            <img src="images/nav_image/${obj.imgUrl}" alt=">${obj.title}">
                            <p>${obj.title}</p>
                        </div>
                    `)
                };

            });
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal', // 横向切换选项
                loop: true, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                    // dynamicBullets: true,
                    clickable: true,

                },
                autoplay: {
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                },
            })


            // 推荐数据
            $.each(recommend, function (i, obj) {
                if (obj.style == "VIP") {
                    $(".recommend").append(`
                        <li>
                            <a href="javascript:;">
                                <img src="images/recommend/${ obj.imgurl}" alt="">
                                <span>${ obj.style}</span>
                                <b>${ obj.time}</b>
                                <div>
                                    <p class="p1">${ obj.title1}</p>
                                    <p class="p2">${ obj.title2}</p>
                                </div>
                            </a>
                        </li>
                    `)
                } else if (obj.style == "独播") {
                    $(".recommend").append(`
                    <li>
                        <a href="javascript:;">
                            <img src="images/recommend/${ obj.imgurl}" alt="">
                            <span class="active">${ obj.style}</span>
                            <b>${ obj.time}</b>
                            <div>
                                <p class="p1">${ obj.title1}</p>
                                <p class="p2">${ obj.title2}</p>
                            </div>
                        </a>
                    </li>
                `)
                };
            });

            // 剧集
            var episode = e.episode; /* 剧集的json */
            console.log(episode);

            // 渲染分支  写成一个方法
            var index1 = 0; //剧集的初始值
            var maxI = episode.branch.length;
            tab(index1, $(".jj"), 6, episode);

            function tab(index, obj, num, data) {
                // 渲染标题
                obj.find(".main").html("");
                obj.find(".main").append(`
                    <a href="javascript:;">
                        <div>
                            <img src="images/episode/${ data.caption.imgurl}" alt="">
                            <span>${ data.caption.time}</span>
                        </div>
                        <div class="p1">${ data.caption.title1}</div>
                        <div class="p2">${ data.caption.title2}</div>
                    </a>
                `);
                obj.find(".message").html("");
                for (var i = index * num; i < (index + 1) * num; i++) {
                    if (data.branch[i].style == "VIP" || data.branch[i].style == "HDR") {
                        obj.find(".message").append(`
                            <a href="javascript:;">
                                <div>
                                    <img src="${ data.branch[i].imgurl}" alt="">
                                    <span class="vip">${ data.branch[i].style}</span>
                                    <b>${ data.branch[i].time}</b>
                                </div>
                                <p class="p1">${ data.branch[i].title1}</p>
                                <p class="p2">${ data.branch[i].title2}</p>
                            </a>
                        `)
                    } else {
                        obj.find(".message").append(`
                            <a href="javascript:;">
                                <div>
                                    <img src="${ data.branch[i].imgurl}" alt="">
                                    <span class="db_yg">${ data.branch[i].style}</span>
                                    <b>${ data.branch[i].time}</b>
                                </div>
                                <p class="p1">${ data.branch[i].title1}</p>
                                <p class="p2">${ data.branch[i].title2}</p>
                            </a>
                        `)
                    }

                }
                /*  $.each(episode.branch, function (i,obj) {
                     console.log(obj)
                 }) */
            };
            // 剧集 》 点击换一批
            $(".content>.jj>.footer>a:last-child").click(function () {
                index1++;
                if (index1 >= maxI / 6) {
                    index1 = 0;
                }
                tab(index1, $(".jj"), 6, episode);
            });


            function tab1(data, el) {
                $.each(data, function (i, obj) {
                    if (obj.style == "VIP" || obj.style == "HDR") {
                        el.find(".message").append(`
                            <a href="javascript:;">
                                <div>
                                    <img src="${ obj.imgurl}" alt="">
                                    <span class="vip">${ obj.style}</span>
                                    <b>${ obj.time}</b>
                                </div>
                                <p class="p1">${ obj.title1}</p>
                                <p class="p2">${ obj.title2}</p>
                            </a>
                        `)
                    } else {
                        el.find(".message").append(`
                            <a href="javascript:;">
                                <div>
                                    <img src="${ obj.imgurl}" alt="">
                                    <span class="db_yg">${ obj.style}</span>
                                    <b>${ obj.time}</b>
                                </div>
                                <p class="p1">${ obj.title1}</p>
                                <p class="p2">${ obj.title2}</p>
                            </a>
                        `)
                    }
                });
            };
            // 为你推荐
            var recommendedForYou = e.recommendedForYou;
            console.log(recommendedForYou);
            tab1(recommendedForYou, $(".recommendedForYou"));




            // 综艺 
            var variety = e.variety;
            var index2 = 0;
            var maxI2 = e.variety.branch.length;
            tab(index2, $(".zy"), 4, variety);
            // 点击 综艺 》 换一拨
            $(".content>.zy>.footer>a:last-child").click(function () {
                index2++;
                if (index2 >= maxI2 / 4) {
                    index2 = 0;
                }
                tab(index2, $(".zy"), 4, variety);
            });


            // 动漫
            var cartoon = e.cartoon;
            var index3 = 0;
            var maxI3 = cartoon.branch.length;
            tab(index3, $(".dm"), 6, cartoon);
            // 点击 动漫 》 换一拨
            $(".content>.dm>.footer>a:last-child").click(function () {
                index3++;
                // console.log("ddddd")
                if (index3 >= maxI3 / 6) {
                    index3 = 0;
                }
                tab(index3, $(".dm"), 6, cartoon);
            });

            // 少儿
            var children = e.children;
            var index4 = 0;
            var maxI4 = children.branch.length;
            tab(index4, $(".s_e"), 6, children);
            // 点击 少儿 》 换一拨
            $(".content>.s_e>.footer>a:last-child").click(function () {
                index4++;
                // console.log("ddddd")
                if (index4 >= maxI4 / 6) {
                    index4 = 0;
                }
                tab(index4, $(".s_e"), 6, children);
            });


            // 热点·娱乐
            function tab2(data, el) {
                $.each(data, function (i, obj) {
                    el.find(".message").append(`
                        <a href="javascript:;">
                            <div>
                                <img src="${ obj.imgurl}" alt="">
                                <b>${ obj.time}</b>
                            </div>
                            <p class="p1">${ obj.title1}</p>
                        </a>
                    `)
                });
            };
            var hotRecreation = e.hotRecreation;
            console.log(hotRecreation);
            tab2(hotRecreation, $(".rd_yl"));


            // 体育
            var sports = e.sports;
            var index5 = 0;
            var maxI5 = sports.length;
            tab3(index5, $(".ty"), 4, sports);

            function tab3(index, obj, num, data) {
                obj.find(".message").html("");
                for (var i = index * num; i < (index + 1) * num; i++) {
                    obj.find(".message").append(`
                        <a href="javascript:;">
                            <div>
                                <img src="${ data[i].imgurl}" alt="">
                                <b>${ data[i].time}</b>
                            </div>
                            <p class="p1">${ data[i].title1}</p>
                            <p class="p2">${ data[i].title2}</p>
                        </a>
                    `);
                }
            };
            // 点击 体育 》 换一拨
            $(".content>.ty>.footer>a:last-child").click(function () {
                console.log("ssssss")
                index5++;
                // console.log("ddddd")
                if (index5 >= maxI5 / 4) {
                    index5 = 0;
                }
                tab3(index5, $(".ty"), 4, sports);
            });



            // 纪录片·文化
            var documentaryCulture = e.documentaryCulture;
            // tab2(documentaryCulture, $(".documentaryCulture"));
            documentary(documentaryCulture, $(".documentaryCulture"));

            function documentary(data, el) {
                $.each(data, function (i, obj) {
                    if (obj.style == "HDR" || obj.style == "VIP") {
                        el.find(".message").append(`
                            <a href="javascript:;">
                                <div>
                                    <img src="${ obj.imgurl}" alt="">
                                    <span class="vip">${ obj.style}</span>
                                    <b>${ obj.time}</b>
                                </div>
                                <p class="p1">${ obj.title1}</p>
                                <p class="p2">${ obj.title2}</p>
                            </a>
                        `)
                    } else {
                        el.find(".message").append(`
                            <a href="javascript:;">
                                <div>
                                    <img src="${ obj.imgurl}" alt="">
                                    <span class="db_yg">${ obj.style}</span>
                                    <b>${ obj.time}</b>
                                </div>
                                <p class="p1">${ obj.title1}</p>
                                <p class="p2">${ obj.title2}</p>
                            </a>
                        `)
                    };

                });
            }
        }
    });

    var height = window.innerHeight;
    window.onscroll = function () {
        var h = document.body.scrollTop || document.documentElement.scrollTop;
        height = window.innerHeight;
        if (h > height * 0.5) {
            $(".goToTop").show();
        } else {
            $(".goToTop").hide();
        }
    };
    /* 点击返回顶部 */
    $(".goToTop").click(function () {
        $('html,body').animate({
            scrollTop: '0px'
        }, 'slow');
    });
});
